<template>
  <div class="tags-wrapper">
    <cube-scroll-nav-bar
      class="tag-item border-bottom-1px"
      :labels="labels"
      :current="currentLabel"
      @change="handleChange" />
    <div class="tag-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    labels: {
      type: Array,
      default() {
        return []
      }
    },
    // 显示的当前标题
    currentLabel: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleChange(label, e) {
      const index = this.labels.indexOf(label)
      this.$emit('clickLabel', index)
    }
  }
}
</script>

<style scoped lang="stylus">
.tags-wrapper
  .tag-content
    margin 10px


</style>
